<template>
    <div class="AudioFoot">
        <canvas class="AudioEachrts" ref="canvas">

        </canvas>
        <div class="FootContent">
            <audio ref="audio" crossOrigin="anonymous"></audio>
            <div class="audioMsg">
                <div class="audioimg" @click="$router.push('/SongDetails')">
                    <img :src="playListMsg.al.picUrl" alt="">
                </div>
                <div class="audiotext">
                    <p class="audioTitle">
                        {{ playListMsg.name }}
                    </p>
                    <div class="audioar">
                        <span v-for="(item, index) in playListMsg.ar" :key="item.id"> {{ item.name }} <span
                                v-if="index != playListMsg.ar.length - 1"> / </span> </span>
                    </div>

                </div>
            </div>
            <div class="center">
                <div class="button">
                    <svg t="1687652289084" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4797" width="20" height="20">
                        <path
                            d="M861.742545 520.005818c13.963636 0 25.460364 10.146909 27.648 23.458909l0.372364 4.514909v77.730909a183.435636 183.435636 0 0 1-174.033454 183.20291l-9.448728 0.279272H229.981091l90.437818 90.437818a28.439273 28.439273 0 0 1 3.258182 36.305455l-3.258182 3.909818a28.439273 28.439273 0 0 1-36.305454 3.258182l-3.909819-3.258182-136.192-136.192a33.978182 33.978182 0 0 1-3.490909-44.218182l3.490909-4.049454 133.911273-133.911273a28.439273 28.439273 0 0 1 43.52 36.305455l-3.258182 3.909818-87.412363 87.365818-4.049455 4.142545h479.557818a127.441455 127.441455 0 0 0 127.255273-119.714909l0.232727-7.773091v-77.730909c0-15.453091 12.520727-27.973818 27.973818-27.973818z m-122.135272-438.923636l3.956363 3.258182L879.709091 220.532364a33.978182 33.978182 0 0 1 8.192 13.079272l0.651636 2.187637c2.606545 9.774545 0.791273 20.48-5.399272 28.951272l-3.444364 4.049455-133.911273 133.911273a28.439273 28.439273 0 0 1-43.52-36.305455l3.258182-3.909818 87.412364-87.365818 4.049454-4.189091-479.604363 0.046545a127.441455 127.441455 0 0 0-127.208728 119.714909l-0.232727 7.726546v77.730909a28.020364 28.020364 0 0 1-55.621818 4.561455l-0.372364-4.561455V398.429091a183.435636 183.435636 0 0 1 173.986909-183.202909l9.448728-0.232727h476.346181L703.301818 124.555636a28.439273 28.439273 0 0 1-3.304727-36.305454l3.258182-3.909818a28.439273 28.439273 0 0 1 36.305454-3.258182z"
                            fill="#dbdbdb" p-id="4798"></path>
                    </svg>
                    <svg t="1687652195467" @click="goPlaly(-1)" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3316" width="20" height="20">
                        <path
                            d="M128 102.4V928c0 17.673 14.327 32 32 32 17.673 0 32-14.327 32-32V102.4c0-17.673-14.327-32-32-32-17.673 0-32 14.327-32 32zM774.028 143.795l-404.352 331.09c-27.383 22.42-27.435 58.886 0 81.35l404.352 331.09c27.382 22.42 49.676 12.003 49.676-23.366V167.16c0-35.646-22.24-45.83-49.676-23.365z m-40.546-49.518c69.12-56.597 154.222-16.897 154.222 72.883v696.8c0 89.481-85.14 129.447-154.222 72.883L329.13 605.753c-58.7-48.064-58.662-132.353 0-180.386l404.352-331.09z"
                            fill="#dbdbdb" p-id="3317"></path>
                    </svg>
                    <svg v-if="isbtnShow" @click="audioPlay" t="1687653106737" class="icon" viewBox="0 0 1048 1024"
                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1064" width="32" height="32">
                        <path
                            d="M524.272128 0.018022C241.513165 0.018022 12.288102 229.245952 12.288102 512.005018c0 112.734003 36.43904 216.957952 98.17897 301.537997l38.667981-40.258048C97.458176 699.230003 67.143168 609.158963 67.143168 512.005018 67.143168 259.540992 271.807078 54.872986 524.272128 54.872986c252.45696 0 457.120973 204.668006 457.120973 457.132032 0 252.460954-204.664013 457.118003-457.120973 457.118003-96.240026 0-185.530982-29.744026-259.189043-80.53504l-34.539008 42.797978c83.150029 58.344038 184.437965 92.596019 293.728973 92.596019 282.758963 0 511.984026-229.220966 511.984026-511.976038C1036.256154 229.245952 807.031091 0.018022 524.272128 0.018022zM615.693107 256.011981l0 511.987 54.855 0L670.548107 256.012 615.693128 256.012zM377.996083 256.011981l0 511.987 54.855 0L432.851083 256.012 377.996128 256.012z"
                            fill="#dbdbdb" p-id="1065"></path>
                    </svg>
                    <svg v-else @click="audioPlay" t="1687652083797" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4064" width="32" height="32">
                        <path
                            d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z"
                            fill="#dbdbdb" p-id="4065"></path>
                        <path
                            d="M672 441.6l-170.666667-113.066667c-57.6-38.4-106.666667-12.8-106.666666 57.6v256c0 70.4 46.933333 96 106.666666 57.6l170.666667-113.066666c57.6-42.666667 57.6-106.666667 0-145.066667z"
                            fill="#dbdbdb" p-id="4066"></path>
                    </svg>
                    <svg t="1687652219771" @click="goPlaly(1)" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4279" width="20" height="20">
                        <path
                            d="M889.6 921.6V96c0-17.673-14.327-32-32-32-17.673 0-32 14.327-32 32v825.6c0 17.673 14.327 32 32 32 17.673 0 32-14.327 32-32zM243.572 880.205l404.352-331.09c27.383-22.42 27.435-58.886 0-81.35l-404.352-331.09c-27.382-22.42-49.676-12.003-49.676 23.366V856.84c0 35.646 22.24 45.83 49.676 23.365z m40.546 49.518c-69.12 56.597-154.222 16.897-154.222-72.883v-696.8c0-89.481 85.14-129.447 154.222-72.883l404.352 331.09c58.7 48.064 58.662 132.353 0 180.386l-404.352 331.09z"
                            fill="#dbdbdb" p-id="4280"></path>
                    </svg>
                    <svg t="1687652359665" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="7683" width="20" height="20">
                        <path
                            d="M512 0c282.766222 0 512 229.233778 512 512s-229.233778 512-512 512S0 794.766222 0 512 229.233778 0 512 0z m0 64C264.590222 64 64 264.590222 64 512S264.590222 960 512 960 960 759.409778 960 512 759.409778 64 512 64z m262.826667 183.694222V727.04c0 29.411556-6.883556 43.804444-25.656889 51.313778-20.024889 8.135111-53.191111 8.760889-103.879111 8.760889-2.503111-12.515556-9.386667-34.417778-15.644445-46.307556 38.172444 1.877333 75.093333 1.251556 86.357334 0.625778 10.638222 0 14.392889-3.754667 14.392888-14.392889V290.872889h-300.373333V247.694222H774.826667z m-408.007111 163.953778v263.452444l64.455111-45.056c3.128889 12.515556 10.012444 30.037333 13.767111 38.798223-98.929778 73.898667-118.414222 88.206222-128.142222 100.209777l-1.393778 1.792c-5.006222-9.386667-18.147556-25.031111-26.282667-31.914666 11.889778-9.386667 33.792-32.540444 33.792-63.829334v-219.022222H230.4v-44.430222h136.419556z m288.483555 43.804444v198.997334H512v41.927111h-41.927111v-240.924445h185.230222z m-41.927111 40.049778H512v118.272h101.376V495.502222z m71.964444-142.677333v40.049778h-239.672888v-40.049778h239.672888zM297.984 235.804444c33.166222 28.16 75.719111 66.958222 95.744 92.615112l-31.288889 32.540444c-18.773333-26.282667-60.700444-67.584-94.492444-96.369778z"
                            fill="#dbdbdb" p-id="7684"></path>
                    </svg>
                </div>
                <div class="slider">
                    <p>{{ timeTranstion(currentTime) }} </p>
                    <el-slider v-model="currentProgress" :max="1" :step="0.01" @change="changeCurrentTime"  :show-tooltip="false"></el-slider>
                    <p> {{ timeTranstion(duration) }} </p>
                </div>
            </div>
            <div class="audioRight">

            </div>
        </div>
      
    </div>
</template>

<script>
import { mapState } from "vuex";
import { GetUrlTransition,GetLyric } from "@/api/Playlist";

export default {
    data() {
        return {
            isInit: false,//是否初始化
            dataArray: [],//可视化图像
            analyser: null,//
            isbtnShow: false,//按钮显示
            urls: '/song/url?id=436514312',//音频地址
            interVal: null,//当前时间更新定时器
            currentAnimation: null,//进度计时器
            currentProgress: 0,//当前进度
            TimerChange:0,//修改后的时间
            IsTimerChange:false// 是否需要修改时间
        }
    },
    computed: {
        ...mapState({
            playList: state => state.PlaylistDetails.playList,
            playListIndex: state => state.PlaylistDetails.playListIndex,
            currentTime: state => state.PlaylistDetails.currentTime,
            duration: state => state.PlaylistDetails.duration
        }),
        playListMsg() {
            return this.playList[this.playListIndex]
        },
    },
    methods: {
        // 修改播放时长
        changeCurrentTime(index) { 
            // 获取修改时间
            this.TimerChange = parseInt(index * this.duration)
            // 是否调用修改
            this.IsTimerChange=true
        },
        // 修改进度条当前时长
        updateCurrentTime() {
            // 更改定时器 每秒执行一次进度条
            this.interVal = setInterval(() => {
                this.currentTimeFrame()
            }, 500);
        },
        // 
        currentTimeFrame() {
            // 获取当前播放时长
            let timer = 0
            // 是否调用修改
            if (this.IsTimerChange) {
                // 获取修改时间
                timer=this.TimerChange
                // 将当前播放时间更改为修改时间
                this.$refs.audio.currentTime=timer
                // 修改总的修改时间
                // 保存当前播放时长
                this.$store.commit("PlaylistDetails/setCurrentTime", timer);
                // 获取当前播放进度百分比
                this.currentProgress = timer / this.duration
                this.IsTimerChange=false
            } else {
                timer = this.$refs.audio.currentTime
                // 保存当前播放时长
                this.$store.commit("PlaylistDetails/setCurrentTime", timer);
                // 获取当前播放进度百分比
                this.currentProgress = this.currentTime / this.duration
            }
            
        },
        // 转换分钟
        timeTranstion(timer) {
            const timerDate = Math.floor(timer)
            let m = Math.floor(timerDate / 60 % 60)
            m = m >= 10 ? m : '0' + m
            let s = Math.floor(timerDate % 60)
            s = s >= 10 ? s : '0' + s
            return `${m} : ${s}`
        },
        // 保存当前歌曲的总时长
        updateDuration() {
            this.$store.commit("PlaylistDetails/setDuration", this.$refs.audio.duration);
        },
        // 点击播放按钮
        audioPlay() {
            // 判断按钮是什么状态
            if (this.isbtnShow) {
                // 暂停时 清除定时器 修改按钮状态
                this.$refs.audio.pause()
                clearInterval(this.interVal)//暂停清除定时器
                this.isbtnShow = false

            } else {
                // 当音频可以播放时 清除定时器 获取当前歌曲总时长 获取当前时长
                this.$refs.audio.play().then(res => {
                    clearInterval(this.interVal)//暂停清除定时器
                    this.updateDuration()
                    this.updateCurrentTime()
                })

                this.isbtnShow = true

            }
        },
        // 播放下一首
        goPlaly(num) {
            let index = this.playListIndex + num
            if (index < 0) {
                index = this.playList.length - 1
            } else if (index > this.playList.length - 1) {
                index = 0
            }

            this.$store.commit("PlaylistDetails/setPlayListIndex", index);
        },
        // 监听歌曲
        wtachplay() {
            // 获取当前歌曲的url地址
            this.urls = `/song/url?id=${this.playList[this.playListIndex].id}`
            // 获取当前音频的dom地址
            const audioEle = this.$refs.audio
            // 将外链url地址转化为真实地址
            GetUrlTransition(this.urls).then((res) => {
                audioEle.src = res.data.data[0].url
                // 如果是暂停按钮则直接播放
                if (this.isbtnShow) {
                    this.$refs.audio.play().then(res => {
                        clearInterval(this.interVal)//暂停清除定时器
                        this.updateDuration()
                        this.updateCurrentTime()
                    }).catch((err) => {
                        console.warn('音频需要加载 不要点击太快');
                    })
                    // 如果是播放按钮则改为暂停按钮并播放
                } else {
                    this.$refs.audio.play().then(res => {
                        clearInterval(this.interVal)//暂停清除定时器
                        this.updateDuration()
                        this.updateCurrentTime()
                    }).catch((err) => {
                        console.warn('音频需要加载 不要点击太快');
                    })
                    this.isbtnShow = true
                }

            })
            // 更改歌词
            GetLyric(this.playList[this.playListIndex].id).then(value =>{
                console.log(value.data.lrc,'歌词');
                this.$store.commit("PlaylistDetails/setLyric", value.data.lrc.lyric);

            })
        },
        // 音频可视化初始化工程
        audioEachrts() {
            const that = this
            const audioEle = that.$refs.audio
            const url = that.urls
            let timer = null
            GetUrlTransition(url).then((res) => {
                audioEle.src = res.data.data[0].url
            })
            const cvs = that.$refs.canvas
            const ctx = cvs.getContext('2d')
            // 初始化canvas的尺寸
            function initCvs() {
                cvs.width = window.innerWidth * devicePixelRatio
                cvs.height = 50
            }
            initCvs()
            window.addEventListener('keyup', (e) => {
                if (e.key===' ') {
                    that.audioPlay()
                }
            })
            // 设置按钮的播放事件
            audioEle.onplay = function () {
                if (that.isInit) {
                    cancelAnimationFrame(timer)
                    setTimeout(() => {
                        draw()
                    }, 1);
                    return
                }
                // 初始化 
                const audCtx = new AudioContext() //创建音频上下文
                const source = audCtx.createMediaElementSource(audioEle)//创建音频源节点
                that.analyser = audCtx.createAnalyser()
                that.analyser.fftSize = 512
                // 创建数组 用于接收分析器节点的分析数据
                that.dataArray = new Uint8Array(that.analyser.frequencyBinCount)
                source.connect(that.analyser)
                that.analyser.connect(audCtx.destination)//
                that.isInit = true
                draw()
                // console.log(that.isInit);
            }
            audioEle.onpause = function () {
                clearInterval(that.interVal)//暂停清除定时器
            }
            audioEle.onended = function () {
                setTimeout(() => {
                    cancelAnimationFrame(timer)
                    clearInterval(this.interVal)//暂停清除定时器
                    that.goPlaly(1)
                    that.isbtnShow = false
                }, 1000);
            }
            function draw() {
                timer = requestAnimationFrame(draw)
                const { width, height } = cvs
                ctx.clearRect(0, 0, width, height)
                // console.log(that.isInit);
                if (!that.isInit) {
                    return;
                }
                // 让分析器节点分析出数据到数组中
                that.analyser.getByteFrequencyData(that.dataArray)
                // console.log(dataArray);
                // 条数
                const len = that.dataArray.length / 1.5
                // 绘图颜色
                ctx.fillStyle = '#F7BECD'
                // 矩形宽度
                const barWidth = width / len / 2
                for (let i = 0; i < len; i++) {
                    // 单个举行长度
                    const data = that.dataArray[i] //<256
                    // 矩形长度
                    const barHeight = (data / 255) * height
                    // x轴
                    const x = i * barWidth + width / 2
                    // y轴
                    const y = height - barHeight
                    // x轴
                    const x1 = width / 2 - i * barWidth
                    ctx.fillRect(x, y, barWidth - 2, barHeight)
                    ctx.fillRect(x1, y, barWidth - 2, barHeight)
                }
            }
        }
    },
    watch: {
        playList: {
            deep: true,
            handler(newVal, oldVal) {
                // this.$store.commit("PlaylistDetails/setPlayListIndex", 0);
                this.wtachplay()
            },
        },
        playListIndex() {
            this.wtachplay()
        }
    },
    mounted() {
        this.audioEachrts()
    },
}
</script>

<style lang="less">
.AudioFoot {
    position: relative;

    .AudioEachrts {
        position: absolute;
        top: -30px;
        width: 100%;
        height: 30px;
    }

    .FootContent {
        display: flex;
        .audioMsg {
            width: 400px;
            display: flex;
            padding: 10px 10px 10px 30px;
            box-sizing: border-box;

            .audioimg {
                width: 40px;
                height: 40px;

                img {
                    border-radius: 50px;
                    width: 40px;
                    height: 40px;
                }
            }

            .audiotext {
                display: flex;
                flex-direction: column;
                padding-left: 10px;

                .audioTitle {
                    width: 300px;
                    margin-bottom: 3px;
                    white-space: nowrap;
                    overflow-x: scroll;

                    &::-webkit-scrollbar {
                        display: none;
                    }
                }

                .audioar {
                    width: 300px;
                    font-size: 12px;
                    color: gray;
                    white-space: nowrap;
                    overflow-x: scroll;

                    &::-webkit-scrollbar {
                        display: none;
                    }
                }
            }
        }

        .center {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            flex: 1;

            .button {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .slider {
                width: 450px;
                display: flex;
                justify-content: center;
                align-items: center;

                p {
                    padding: 0 5px;
                    font-size: 12px;
                }

                .el-slider__runway {
                    width: 350px;
                    height: 3px;
                    margin: 10px 0;
                    &:hover .el-slider__button-wrapper {
                        display: block;
                    }

                    .el-slider__bar {
                        height: 3px;
                        background-color: #FF7A9E !important;
                    }

                    .el-slider__button-wrapper {
                        width: 10px;
                        height: 10px;
                        top: -20px;
                        margin: 10px 0;
                        display: none;

                        &:active {
                            display: block;
                        }

                        .el-slider__button {
                            width: 10px;
                            height: 10px;
                            border: 1px solid #FF7A9E;

                        }
                    }
                }

            }

            svg {
                margin: 0 10px;
            }
        }

        .audioRight {
            width: 400px;
        }
    }
}
</style>